<script setup lang="ts">
import {ref, computed} from "vue";
import {useStore} from "@/store";

const store = useStore();
const isShow = computed(() => store.state.login.isShowLoginDialog);
const username = ref("15755967688");
const password = ref("200223252@lml");
const hiddenShowLoginWindow = () => {
  store.commit("login/CHANGE_IS_SHOW_LOGIN_DIALOG", false);
};
const willLogin = () => {
  console.log("willLogin");
  store.commit("login/CHANGE_IS_SHOW_LOGIN_DIALOG", false);
  store.dispatch("login/userLogin", {username: username.value, password: password.value}).then(() => {

    // store.dispatch("recommend/getRecommendedListOfTheDay", getCookie());
  });

};
</script>
<template>
  <el-dialog v-model="isShow"
             title="欢迎登陆"
             width="400px"
             center
             @close="hiddenShowLoginWindow">
    <span>
      <el-input v-model="username" class="w-50 m-2" placeholder="请输入用户名">
        <template #prefix>
          <el-icon class="el-input__icon">
            <svg class="icon" aria-hidden="true">
               <use xlink:href="#icon-yonghuming"></use>
            </svg>
          </el-icon>
        </template>
      </el-input>
      <el-input v-model="password" class="w-50 m-2" placeholder="请输入密码">
        <template #prefix>
          <el-icon class="el-input__icon">
            <svg class="icon" aria-hidden="true">
               <use xlink:href="#icon-mima"></use>
            </svg>
          </el-icon>
        </template>
      </el-input>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button color="#ffffff"
                   style="color: #000000"
                   @click="hiddenShowLoginWindow">取消</el-button>
        <el-button color="#9B1509"
                   style="color: white"
                   @click="willLogin">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<style scoped lang="scss">
</style>
